import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Space, Typography } from 'antd';

export default function App() {
  const items = [
    {
      key: '1',
      label: '北京国贸项目',
    },
    {
      key: '2',
      label: '北京霄云路氪空间项目',
    },
    {
      key: '3',
      label: '上海徐家汇项目',
    },
  ];
  const [xianShi,setXianShi] = useState(items[0].label);
  const xiangMu = (e) => {
    if(e.key === '1') {
      setXianShi(items[e.key-1].label)   
    }
    if(e.key === '2') {
      setXianShi(items[e.key-1].label)
    }
    if(e.key === '3') {
      setXianShi(items[e.key-1].label)
    }
  }
  return (
    <Dropdown
    menu={{
      items,
      selectable: true,
      defaultSelectedKeys: ['1'],
      onClick: xiangMu,
    }}
  >
    <Typography.Link>
      <Space style={{color:'#fff',
         background:'rgb(64,68,77)',
        //  width:'150px', 
         height:'30px',
         padding:'0px 10px',
         fontSize:'14px'
         }}>
      {xianShi}
      <div className='iconfont icon-xiangxiajiantou'></div>
      </Space>
    </Typography.Link>
  </Dropdown>
  )
}